<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - YUI Integration (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/grids/grids.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">

<style type="text/css">
    #statesmod {position:relative;}
    #statesautocomplete{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
    #statesinput {_position:absolute;width:100%;height:1.4em;} /* abs for ie quirks */
    #statescontainer {position:absolute;top:1.7em;width:100%}
    #statescontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    #statescontainer ul {padding:5px 0;width:100%;}
    #statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
    #statescontainer li.yui-ac-highlight {background:#ff0;}
    #statescontainer li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>

<body>
<div id="doc" class="yui-t7">
    <div id="hd">
        <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: YUI Integration</h1>
    </div>

    <div id="bd">
        <div id="yui-main">
        <div class="yui-b">
            <div class="yui-gc">
                <div class="yui-u first">
                    <!-- Content begins -->
                    <h3>Using Logger to Debug YUI Library Components</h3>
                    <p>In this example, we have set up an instance of the YUI
                    AutoComplete widget. By using the debug build of the
                    AutoComplete source code, we can read logging messages generated
                    from the component in a LogReader. By passing in custom
                    configuration values into its constructor, we are able
                    to set custom style attributes on the LogReader.</p>

                    <!-- AutoComplete begins -->
                    <div id="statesmod">
                        <form onsubmit="return validateForm();">
                            <h3>Find a state:</h3>
                            <div id="statesautocomplete">
                                <input id="statesinput">
                                <div id="statescontainer"></div>
                            </div>
                        </form>
                    </div>
                    <!-- AutoComplete ends -->
                </div>
                <!-- Content ends -->
            </div>
        </div>
        
        <div class="yui-g">
            <!-- Sample code begins -->
            <div id="code">
                <h3>Sample Code</h3>

                <textarea name="code" class="HTML" cols="60" rows="1">
                <script type="text/javascript">
                ///No custom CSS styles were defined.

                // No custom markup was defined.

                // We have first included the debug builds of YUI components
                // event-debug.js and autocomplete-debug.js

                // Then we can see log messages being output to our LogReader
                var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
                </script>
                </textarea>
            </div>
            <!-- Code sample ends -->
        </div>
    </div>
    </div>
</div>

<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->

<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
    "Alabama",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    "Colorado",
    "Connecticut",
    "Delaware",
    "Florida",
    "Georgia",
    "Hawaii",
    "Idaho",
    "Illinois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Kentucky",
    "Louisiana",
    "Maine",
    "Maryland",
    "Massachusetts",
    "Michigan",
    "Minnesota",
    "Mississippi",
    "Missouri",
    "Montana",
    "Nebraska",
    "Nevada",
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Dakota",
    "North Carolina",
    "Ohio",
    "Oklahoma",
    "Oregon",
    "Pennsylvania",
    "Rhode Island",
    "South Carolina",
    "South Dakota",
    "Tennessee",
    "Texas",
    "Utah",
    "Vermont",
    "Virginia",
    "Washington",
    "West Virginia",
    "Wisconsin",
    "Wyoming"
];
</script>
<!-- In-memory JS array ends-->


<script type="text/javascript">
YAHOO.example.AutoCompleteLogger = function() {
    return {
        validateForm: function() {
            // Validate form inputs here
            return false;
        },

        init: function() {
            // Instatiate LogReader
            var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});

            // Instantiate DataSource
            var oACDS = new YAHOO.widget.DS_JSArray(statesArray);

            // Instantiate AutoComplete
            var oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
            oAutoComp.queryDelay = 0;
            oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
        }
    };
}();

YAHOO.util.Event.addListener(this,'load',YAHOO.example.AutoCompleteLogger.init);
</script>

<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>
